<template>
	<scroll-view class="product-list" :scroll-y="true" :refresher-enabled="true" :refresher-triggered="triggered"
		@refresherrefresh="refreshData" @scrolltolower="loadMoreData" ref="scrollView">
		<view class="product-item" v-for="(item, index) in productList" :key="index">
			{{index + 1}}.{{ item.title }}
		</view>
		<u-loading-icon className="loadingIcon" :show="isLoading" :size="16" :text="loadingText"
			:vertical="false"></u-loading-icon>
	</scroll-view>
</template>

<script>
	import {
		request,
		requestData
	} from '@/utils/http.js';

	export default {
		data() {
			return {
				triggered: true, // 下拉是否激活
				query: '', // 对应搜索出商品列表的关键字，从搜索页跳转来时传过来
				productList: [], // 商品列表数据
				currentPage: 1, // 当前页码
				pageSize: 10, // 每页数据数量
				isLoading: false, // 是否正在发送请求
				isFinished: false, // 判断数据源是否加载完毕
				total: 60, // 数据总条数
				lock: false,
				loadingText: '加载中...'
			}
		},
		onLoad({
			key
		}) {
			// 接收"回车搜索"或"点击搜索按钮"跳转到商品页面时传入的关键字
			this.query = key
			// 初始化加载数据
			this.loadData();
		},
		methods: {
			// 获取商品列表数据
			async loadData(flag = false) {
				// 判断数据源是否加载完毕
				// 如 isFinished 为true 就是在加载中，直接 return 并提示
				// 用布尔值变量isLoading判断是否正在发送请求，
				// 为true就是在加载中，此时直接retun
				if (this.isLoading) return
				// 开始加载，将网络请求状态设置 为true
				this.isLoading = true
				const {
					data = []
				} = await requestData('https://unidemo.dcloud.net.cn/api/news', {
					page: this.currentPage
				}, 'GET')
				// 当列表数据请求成功之后，进行新旧数据的拼接处理
				if (flag) {
					this.productList = [...data]
				} else {
					this.productList = [...this.productList, ...data]
				}

				//this.total = data?.length || 0
				// 再将网络状态设置为 false
				this.isLoading = false
				this.triggered = false
				this.lock = false
				// 通过列表数组长度和数据总条数 判断数据源是否加载完毕
			},

			// 下拉刷新数据 将原有的数据全部清除
			async refreshData() {
				this.lock = false
				this.triggered = true
				this.total = 60
				this.isLoading = false
				this.isFinished = false
				this.currentPage = 1;
				await this.loadData(true); // 重新发送请求
			},

			// 下拉刷新数据,数据一请求出来就关闭加载动画,停止下拉刷新
			async onPullDownRefresh() {
				await this.refreshData();
				uni.stopPullDownRefresh();
			},

			// 上拉加载更多数据，当前页码要 ++
			async loadMoreData() {
				if (this.productList.length < this.total) {
					// 请求下一页的数据
					if (!this.lock) {
						this.lock = true
						this.currentPage++;
						await this.loadData();
					}
				} else {
					console.log(this.total, this.productList.length)
					uni.showToast({
						title: "没有更多了",
						icon: "none",
						duration: 2000,
					});
					return;
				}
			},

			//上拉触底，加载更多数据
			onReachBottom() {
				this.loadMoreData();
			},


		},

	}
</script>

<style>
	.product-list {
		height: 100vh;
	}

	.product-item {
		width: 100%;
		height: auto;
		border-bottom: 1px solid rgb(214, 215, 217);
		padding: 10px 15px;
		font-size: 15px;
		color: #303133;
		box-sizing: border-box;
	}

	.loadingIcon {
		margin-top: 5px;
	}
</style>